<template>
  <!-- 这里是轮播图 -->

  <div class="banner-wrap-outer">
    <!-- 羽化背景图 -->
    <div class="banner-wrap" :style="{ background: `url(${bannersBg})` }"></div>
    <div class="banner banxin flex">
      <!-- 这是图片部分 -->
      <div class="banner_img">
        <!-- 图片ul -->
        <ul class="banner_img_ul">
          <li v-for="(item, index) in banners" :key="index">
            <a href="#">
              <transition name="ts">
                <img :src="item.imageUrl" alt="" v-show="curImg === index" />
              </transition>
            </a>
          </li>
        </ul>
        <!-- 图片小点 -->
        <div class="banner_img_a flex">
          <span
            :class="{ banner_active: curImg === index }"
            @click="aChangeImg(index)"
            v-for="(item, index) in banners"
            :key="index"
          ></span>
        </div>
      </div>
      <!-- 左右的按钮 -->
      <div class="banner_btn">
        <button class="bannerBtn last" @click="changeImg(-1)"></button>
        <button class="bannerBtn next" @click="changeImg(1)"></button>
      </div>
      <!-- 下载的图片的板块 -->
      <div class="banner_down">
        <span>PC 安卓 iPhone WP iPad Mac 六大客户端</span>
        <!-- 下载客户端图片 -->
        <div class="btn_down"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { getBanner } from "@/http/api.js";

export default {
  data() {
    return {
      curImg: 0,
      timer: null,
      banners: [],
      bannersBg: "",
    };
  },
  methods: {
    changeImg(type) {
      this.curImg += type;
      if (this.curImg < 0) {
        this.curImg = this.banners.length - 1;
      }
      this.curImg = this.curImg % this.banners.length;
      this.bannersBg = this.banners[this.curImg].imageUrl;
      clearInterval(this.timer);
      this.autoRun();
    },
    autoRun() {
      this.timer = setInterval(() => {
        this.curImg++;
        this.curImg = this.curImg % this.banners.length;
        this.bannersBg = this.banners[this.curImg].imageUrl;
      }, 3000);
    },
    aChangeImg(index) {
      this.curImg = index;
      this.bannersBg = this.banners[index].imageUrl
    },
  },
  created() {
    // 请求轮播图
    getBanner().then((res) => {
      if (res.code !== 200) return console.log("请求失败");
      this.banners = res.banners;
      this.bannersBg = this.banners[0].imageUrl;
    });
  },
  mounted() {
    this.autoRun();
  },
};
</script>
 
<style lang="less" scoped>
.ts-enter,
.ts-leave-to {
  opacity: 0;
}
.ts-enter-active,
.ts-leave-active {
  transition: 1s;
}
.ts-enter-to,
.ts-leave {
  opacity: 1;
}
.banner-wrap-outer {
  width: 100%;
  height: 285px;
  position: relative;
  overflow: hidden;

  .banner-wrap {
    width: 100%;
    height: 285px;
    position: absolute;
    transition: 0.5s;
    overflow: hidden;
    // background-color: pink;
    background: url(../../assets/upload/img1.jpg) no-repeat;
    background-position: center center;
    background-size: cover;
    filter: blur(20px);
  }
  .banner {
    width: 980px;
    height: 285px;
    box-sizing: border-box;
    position: relative;

    .banner_img {
      height: inherit;
      overflow: hidden;
      //   width: 730px;
      flex: 9;
      padding-left: 0;
      padding-right: 0;
      position: relative;
      img {
        height: 285px;
      }
      .banner_img_ul {
        position: relative;
        li {
          position: absolute;
        }
      }
      .banner_img_a {
        position: absolute;
        top: 259px;
        left: 50%;
        transform: translateX(-50%);
        justify-content: space-evenly;
        span {
          width: 20px;
          height: 20px;
          cursor: pointer;
          background: url(../../assets/images/banner.png) 0px -343px no-repeat;
          &:hover {
            background: url(../../assets/images/banner.png) -18px -343px
              no-repeat;
          }
          &.banner_active {
            background: url(../../assets/images/banner.png) -16px -343px
              no-repeat;
          }
        }
      }
      .showImg {
        display: block;
      }
      .hideImg {
        display: none;
      }
    }
    .banner_btn .bannerBtn {
      cursor: pointer;
      width: 37px;
      height: 63px;
      background-color: pink;
      background: url(../../assets/images/banner.png) no-repeat;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      border: 0;
      &.last {
        background-position: 0 -360px;
        left: -50px;
      }
      &.last:hover {
        background-position: 0 -430px;
      }
      &.next {
        background-position: 0 -510px;
        right: -45px;
      }
      &.next:hover {
        background-position: 0 -580px;
      }
    }

    .banner_down {
      position: relative;
      flex: 3;
      height: inherit;
      background: url(../../assets/images/download.png);
      span {
        position: absolute;
        bottom: 0;
        font-size: 12px;
        margin: 10px auto;
        text-align: center;
        color: #8d8d8d;
      }

      .btn_down {
        width: 215px;
        height: 56px;
        position: absolute;
        bottom: 44px;
        left: 19px;
        background: url(../../assets/images/download.png) -19px -185px no-repeat;

        &:hover {
          display: block;
          cursor: pointer;
          background: url(../../assets/images/download.png) -0px -289px
            no-repeat;
        }
      }
    }
  }
}
</style>